<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="text/javascript" src="/views/static/js/jquery-3.0.0.min.js"></script>
    <script type="text/javascript" src="/views/static/js/sockjs.min.js"></script>
    <script type="text/javascript">
        $(function () {
            var websocket;
            // 首先判断是否支持WebSocket
            var url = 'ws://' + window.location.host + '/ws';
            if ('WebSocket' in window) {
                websocket = new WebSocket(url);
            } else if ('MozWebSocket' in window) {
                websocket = new MozWebSocket(url);
            } else {
                url = "http://" + window.location.host + "/ws/sockjs";
                websocket = new SockJS(url);
            }
            // 打开时
            websocket.onopen = function (evnt) {
                console.log("  websocket.onopen  ");
            };
            // 处理消息时
            websocket.onmessage = function (evnt) {
                $("#msg").append("<p>(<font color='#1e90ff'>" + evnt.data + "</font>)</p>");
                console.log("websocket.onmessage");
            };
            websocket.onerror = function (evnt) {
                console.log("websocket.onerror");
            };
            websocket.onclose = function (evnt) {
                console.log("websocket.onclose");
            };
            // 点击了发送消息按钮的响应事件
            $("#send").click(function () {
                // 获取消息内容
                var text = $("#content").val();
                // 判断
                if (text == null || text == "") {
                    alert("content can not empty!");
                    return false;
                }
                var msg = {
                    msgContent: text
                };
                // 发送消息
                var isSendSuccess = websocket.send(JSON.stringify(msg));
                if (!isSendSuccess) {
                    console.log("发送失败");
                } else {
                    console.log("发送成功");
                    $("#content").val("");
                }
            });
        });
    </script>
</head>
<body>
<!-- 最外边框 -->
<div style="margin: 20px auto; border: 1px solid blue; width: 300px; height: 500px;">

    <!-- 消息展示框 -->
    <div id="msg" style="width: 100%; height: 70%; border: 1px solid yellow;overflow: auto;"></div>

    <!-- 消息编辑框 -->
    <textarea id="content" style="width: 98%; height: 20%;"></textarea>

    <!-- 消息发送按钮 -->
    <button id="send" style="width: 100%; height: 8%;">发送</button>
</div>
</body>
</html>